<style type="text/css">
#texto {
	background: #c0c0c0;
	padding: 5px;
	border: 1px solid #d1d1d1;
}

span {
	background: #f1f1f1;
}
</style>

<script type="text/javascript">
function preencher(obj) {
	obj.append(" <a class='editarLacuna' href='#editarLacuna' id='" + obj.attr('id') + "'>[editar lacuna]</a>");
}
$(document).ready(function() {
	var lacunas = $("span");
	lacunas.each(function(i) {
		preencher($(this));
	}
	);


$(".editarLacuna").click(function() {
$("span.lacuna").css("background","#f1f1f1");
$("span#"+this.id).css("background","#f00");
$("#lacuna").html("AQUI O FORMULARIO PARA EDITAR A LACUNA <a class='salvar' href='#salvar' id='"+ this.id +"'>EDITAR</a>");
}
);



});

</script>

<div id="texto">
<?=$this->texto ?>
</div>

<div id="lacuna">
	
</div>